<!-- 产品类别基础数据列表 -->
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>产品类别基础数据列表</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link rel="stylesheet" href="/lib/layui-v2.6.8/css/layui.css" media="all" />
    <link rel="stylesheet" href="/css/public.css" media="all" />
    <style>
        .layui-elem-quote {
            padding: 10px;
            border-left: 5px solid #009688;
        }
    </style>
</head>

<body>
    <div class="layuimini-container">
        <div class="layuimini-main">
            <blockquote class="layui-elem-quote layui-text">原材料和成品分类数据，不能随意删减，请联系开发人员添加</blockquote>
            <div>
                <div class="layui-btn-group">
                    <button class="layui-btn" id="btn-expand">全部展开</button>
                    <button class="layui-btn layui-btn-normal" id="btn-fold">全部折叠</button>
                </div>
                <table id="tree-table" class="layui-table" lay-filter="tree-table"></table>
            </div>
        </div>
    </div>

    <!-- 后端接口定义 -->
    <script src="/js/api-route.js"></script>
    <!-- 页面事件处理 -->
    <script src="/lib/layui-v2.6.8/layui.js" charset="utf-8"></script>
    <!-- 扩展组件配置 -->
    <script src="/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
    <script>
        // 使用LayUI加载模块
        layui.use(['table', 'treetable'], function () {
            var $ = layui.jquery,
                table = layui.table,
                treetable = layui.treetable;

            // 渲染表格树
            layer.load(2);

            treetable.render({
                treeColIndex: 1,
                treeSpid: 0,
                treeIdName: 'id',
                treePidName: 'parentId',
                elem: '#tree-table',
                url: $api.basecategory.list,
                page: false,
                cols: [
                    [ // 绑定字段
                        {
                            type: 'numbers', // 自增序号列
                            width: 80, // 自定义宽度
                            title: '序号', // 表头标题
                        },
                        {
                            field: 'category',
                            title: '分类名称',
                        },
                        {
                            field: 'status',
                            width: 120,
                            align: 'center',
                            templet: function (d) {
                                if (d.status == 0) {
                                    return '<span class="layui-badge layui-bg-blue">正常</span>';
                                }
                            },
                            title: '状态',
                        },
                    ],
                ],
                done: function () {
                    layer.closeAll('loading');
                },
            });

            $('#btn-expand').click(function () {
                treetable.expandAll('#tree-table');
            });

            $('#btn-fold').click(function () {
                treetable.foldAll('#tree-table');
            });
        });
    </script>
</body>

</html>